<!-- 创作中心 -->
<template>
	<view class='content'>
		<view class="bg">
			<view class="titleBox">
				<u-icon name="arrow-left" color="#fff" size="38" @click='back'></u-icon>
				<text>创作中心</text>
				<u-icon name="question-circle-fill" color="#FFF" size="38" @click='prompt'></u-icon>
			</view>
			<view class="avatarBox">
				<image class="bg1" :src="user.headPortrait"></image>
				<text>{{user.nickName}}</text>
			</view>
		</view>
		<view class="fixedBox">
			<view class="firstBox">
				<text>讲师入驻</text>
				<view class="">提交信息即可申请入驻，审核通过后上传课程，其余用户每笔付费均能获取现金收益</view>
			</view>
			<view class="centerBox">
				<view class="item">
					<view>姓名</view>
					<u--input placeholder="请输入姓名" v-model="dto.realName" border="none" inputAlign="right" maxlength='10'>
					</u--input>
				</view>
				<view class="item">
					<view>联系方式</view>
					<u--input placeholder="请输入联系方式" v-model="dto.phone" border="none" inputAlign="right">
					</u--input>
				</view>
				<view class="items">
					<view class="title">简要描述</view>
					<u--textarea confirmType="done" v-model="dto.description" placeholder="请描述您擅长的课程类型" maxlength="200" count
						class="text"></u--textarea>
				</view>
				<view class="btnBox" @click='submit'>提交</view>
			</view>

		</view>
		<prompt-popup :show='promptShow' @close='close' :content='content'></prompt-popup>
	</view>
</template>

<script>
	import {
		lecturerApply,
		lecturerInStatus,
		getCopywriting,
		getUserData,
	} from '@/apis/apis.js'
	import promptPopup from '@/pages/mine/modules/promptPopup.vue'
	import avatar from '@/components/avatar.vue'
	export default {
		name: "",
		components: {
			promptPopup,
			avatar
		},
		data() {
			return {
				user: {},
				dto: {
					realName: "",
					phone: "",
					description: ""
				},
				successPop: false,
				promptShow: false,
				description: '', //描述
				content:'',//创作中心文案提示
			}
		},
		onLoad(options) {
			this.user = uni.getStorageSync('USER_DATA')
			if (options.reset) {
				this.init()
			}
			this.copyWriting()
		},
		onShow(){
			this.userData()
		},
		methods: {
			userData() {
				getUserData().then(res => {
					this.user = res.data;
					uni.setStorageSync('USER_DATA', res.data);
				});
			},
			init() {
				lecturerInStatus().then(res => {
					this.dto = res.data
				})
			},
			copyWriting(){
				//创作中心文案提示
				let type=4
				getCopywriting(type).then(res=>{
					this.content=res.data.content
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			prompt() {
				this.promptShow = true
			},
			close() {
				this.promptShow = false
			},
			//提交
			submit() {
				const boo = this.validation()
				if (boo) {
					lecturerApply(this.dto).then(res => {
						if (res.code == 200) {
							uni.navigateTo({
								url: './auditStatus'
							})
						}
					})
				}
			},
			validation() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.dto.realName) {
					uni.showToast({
						title: '请填写姓名',
						icon: 'none'
					})
					return
				}
				if (!this.dto.phone) {
					uni.showToast({
						title: '联系方式不能为空',
						icon: 'none'
					})
					return
				}
				if (!reg.test(this.dto.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
					return
				}
				if (!this.dto.description) {
					uni.showToast({
						title: '请填描述',
						icon: 'none'
					})
					return
				}
				return true
			},
		},
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: #369CFE;

		.bg {
			width: 100%;
			background: url('https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/createBg.png') no-repeat;
			height: 508rpx;
			background-size: cover;
			padding: 76rpx 26rpx 0 32rpx;
			.titleBox {
				display: flex;
				justify-content: space-between;
				align-items: center;

				&>text {
					color: #fff;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}

		}

		.avatarBox {
			display: flex;
			align-items: center;
			font-size: 38rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			padding: 40rpx 0 0 54rpx;
			.bg1 {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 26rpx;
				border: 2px solid;
				background-color: #fff;

				&>image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
				}
			}

		}

		.fixedBox {
			position: fixed;
			top: 276rpx;
			left: 12rpx;
			right: 12rpx;
			bottom: 54rpx;
			background: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			overflow-y: visible;

			.firstBox {
				// width: 335px;
				width: 90%;
				margin: 0 auto;
				margin-top: 30rpx;
				height: 103px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				background: #F6FAFF;
				border-radius: 10rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #78ACE6;
				line-height: 42rpx;
				padding: 0 36rpx 0 16rpx;

				&>text {
					font-size: 30rpx;
					font-weight: bold;
					color: #194FC9;
				}
			}

			.centerBox {
				width: 92%;
				margin: 0 auto;
                .items{
             	padding: 56rpx 14rpx;
             	width: 100%;
             	font-size: 30rpx;
             	font-family: PingFang SC;
             	font-weight: 500;
             	color: #1A1A1A;
             	&>.title {
             		margin-bottom:44rpx;
             	}
             	.text {
             		background-color: #F8F8F8;
             		width: 100%;
             		height: 238rpx;
             	}
             }
				.item {
					padding: 56rpx 14rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F1F1F1;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #1A1A1A;

					view {
						width: 50%;
					}
				}

				.description {
					display: contents;

					&>.title {
						margin: 56rpx 0 44rpx;
					}

					.text {
						background-color: #F8F8F8;
						width: 100%;
						height: 238rpx;
					}
				}

				.btnBox {
					width: 88%;
					margin: 60rpx auto;
					height: 90rpx;
					border-radius: 46rpx;
					background: #194FC9;
					font-size: 15px;
					font-family: Source Han Sans CN;
					color: #FFFFFF;
					text-align: center;
					line-height: 90rpx;
				}
			}

		}



	}
</style>
